<template>
    <div class="userInfo">
        <Row type="flex" justify="space-between">
            <Col span="10" style="padding: 0px 8px;">
                <Card :bordered="false">
                    <p slot="title">个人资料</p>
                    <Form :model="userInfo" :label-width="80">

                        <FormItem label="头像">
                            <Upload :action="action" :on-success="uploadSuccess" :show-upload-list="false">
                                <Avatar :src="userInfo.avatar" size="60"/>
                            </Upload>
                        </FormItem>

                        <FormItem label="昵称">
                            <Input v-model="userInfo.nickname" placeholder="请输入昵称"></Input>
                        </FormItem>
                        <FormItem label="性别">
                            <RadioGroup v-model="userInfo.sex">
                                <Radio label="1">男</Radio>
                                <Radio label="2">女</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="出生日期">
                            <DatePicker type="date" placeholder="请选择出生日期" v-model="userInfo.birthday"></DatePicker>
                        </FormItem>

                        <FormItem label="简介">
                            <Input v-model="userInfo.intro" type="textarea" placeholder="请输入简介"></Input>
                        </FormItem>

                        <FormItem>
                            <Button type="primary" @click="userUpdate">更新</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Col>
            <Col span="14" style="padding: 0px 8px;">
                <Card :bordered="false">
                    <p slot="title">修改密码</p>
                    <Form :model="password" :label-width="80">

                        <FormItem label="原始密码">
                            <Input v-model="password.originalPassword" type="password" placeholder="请输入原始密码"></Input>
                        </FormItem>

                        <FormItem label="新密码">
                            <Input v-model="password.newPassword" type="password" placeholder="请输入新密码"></Input>
                        </FormItem>

                        <FormItem label="确认密码">
                            <Input v-model="password.confirmPassword" type="password" placeholder="请输入确认密码"></Input>
                        </FormItem>

                        <FormItem>
                            <Button type="primary" @click="passwordUpdate">修改</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import {resetTokenAndClearUser} from "@/utils";

export default {
    name: 'userinfo',
    data() {
        return {
            // 用户信息
            userInfo: {
                // 头像
                avatar: '',
                // 昵称
                nickname: '',
                // 性别
                sex: '1',
                // 生日
                birthday: '',
                // 简介
                intro: '',
            },
            // 密码
            password: {
                originalPassword: '',
                newPassword: '',
                confirmPassword: '',
            },
            // 上传地址
            action: process.env.VUE_APP_PORT + '/upload',
        }
    },
    methods: {
        // 图片上传成功
        uploadSuccess(res) {
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            const file = res.data
            this.userInfo.avatar = process.env.VUE_APP_PORT + file.url
        },
        // 用户详情
        async userDetail() {
            const res = await this.$api.userDetail()
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.userInfo = this._.cloneDeep(res.data)
        },
        // 更新用户信息
        async userUpdate() {
            const param = this._.cloneDeep(this.userInfo)
            const res = await this.$api.userUpdate(param)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.$Message.success('更新成功!')
        },
        // 修改密码
        async passwordUpdate() {
            const originalPassword = this.password.originalPassword
            const newPassword = this.password.newPassword
            const confirmPassword = this.password.confirmPassword
            if (!originalPassword) {
                this.$Message.error('原密码不能为空!')
                return false
            }
            if (newPassword != confirmPassword) {
                this.$Message.error('两次密码不一致!')
                return false
            }
            const param = this._.cloneDeep(this.password)
            param.id = this.userInfo.id
            const res = await this.$api.password(param)
            if (!res.success) {
                this.$Message.error(res.message)
                return false
            }
            this.$Message.success('修改成功!')
            setTimeout(() => {
                resetTokenAndClearUser()
                this.$router.push({ name: 'login' })
            }, 1500)
        },
        // 初始化
        init() {
            this.userDetail()
        },
    },
    mounted() {
        this.init()
    },

}
</script>

<style scoped>

</style>
